<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-pink" :isBack="true">
			<block class="text-white" slot="content">新增课程</block>
		</cu-custom>
		<view>
			<view class="solid-bottom">
				<view class="cu-form-group">
					<view class="text-gray title">课程名</view>
					<input class="text-right" v-model="akecheng.kcname" placeholder="请输入课程名" />
					<text class="cuIcon-right text-gray"></text>
				</view>
			</view>
			<view class="solid-bottom">
				<view class="cu-form-group">
					<view class="text-gray title">最小人数</view>
					<input class="text-right" v-model="akecheng.zxrs" placeholder="请输入最小人数" />
					<text class="cuIcon-right text-gray"></text>
				</view>
			</view>
			<view class="solid-bottom">
				<view class="cu-form-group">
					<view class="text-gray title">价格</view>
					<input class="text-right" v-model="akecheng.price" placeholder="请输入价格" />
					<text class="cuIcon-right text-gray"></text>
				</view>
			</view>
			<view class="solid-bottom">
				<view class="cu-form-group">
					<view class="text-gray title">最大人数</view>
					<input class="text-right" v-model="akecheng.zdrs" placeholder="请输入最大人数" />
					<text class="cuIcon-right text-gray"></text>
				</view>
			</view>
			<view class="solid-bottom">
				<view class="cu-form-group">
					<view class="text-gray title">课程类型</view>
					<ba-tree-picker ref="treePicker" :multiple='false'
						@select-change="selectChange" title="选择类型" :localdata="akechenglxs" valueKey="akclxid"
						textKey="lxname" childrenKey="subs" />
					<view class="text-right text-gray" @tap="showPicker">
						<text>{{akecheng.lxname}}</text>
						<text class="cuIcon-right "></text>
					</view>
					
				</view>
			</view>
			
			<view class="">
				<view class="cu-form-group">
					<view class="title text-gray">期间</view>
					<view @click="openDate" class="bg-white select text-gray">
						<text>{{dateOption.sd ? dateOption.sd : "开始日期"}}</text>
						<text>~</text>
						<text>{{dateOption.ed ? dateOption.ed : "结束日期"}}</text>
						<text class="cuIcon-right "></text>
					</view>
				</view>
				<xiaomiaogu-good-date-picker ref="goodDatePicker" @change="changeDate" :option="dateOption"></xiaomiaogu-good-date-picker>
			</view>
			
			<view class="margin-top">
				<cover-update v-model="akecheng.cover" :idKey="'kc'+new Date().getTime()" />
			</view>
			
			<view class="bg-white margin-top-sm">
				<view class="padding solid-bottom flex justify-between">
					<view class="text-gray title">
						<text>课程章节</text>
					</view>
					
				</view>
			
				<view class="bg-white">
					<view class="padding-sm" v-for="(kcitem, index) in akechengitems" :key="index">
						<view class="shadow bg-white padding-sm relative">
							<view class="absolute topright">
								<text @tap="removeKcitem(index)" 
									class="cuIcon-deletefill text-red"></text>
							</view>
							<view class="padding-sm">
								<text class="cuIcon-home">门店：</text>
								<text>{{kcitem.sname}}</text>
							</view>
							<view class="padding-sm">
								<text class="cuIcon-exit">房间：</text>
								<text>{{kcitem.rname}}</text>
							</view>
							<view class="padding-sm">
								<text class="cuIcon-calendar">时段：</text>
								<text class="margin-right-xs">{{kcitem.dt}}</text>
								<text class="margin-right-xs">{{kcitem.st}}</text>
								<text class="margin-right-xs">{{kcitem.et}}</text>
							</view>
							<view class="padding-sm flex justify-start">
								<text class="cuIcon-text">内容：</text>
								<input class="solid" placeholder="请输入章节内容" v-model="kcitem.itemname" />
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="bg-white margin-top-sm">
				<view class="padding solid-bottom flex justify-start">
					<view class="text-gray title">
						<text>描述（图文组合）</text>
					</view>
				</view>

				<view class="padding-sm">
					<simple-editor action="https://api.xxx.xxx/upload" v-model="akecheng.ms"
						:uploadSuccess="editorUploadSuccess" :btns="['text', 'image']"></simple-editor>
				</view>
			</view>

		</view>
		
		<view class="padding ">
			<button @click="save" class="cu-btn block bg-pink lg">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				dateOption: {
					isRange: true,
					isModal: true,
					isShowSubmit: false,
					sd: "",
					ed: "",
					dateNum: 0,
					cd: ""
				},
				akecheng: {
					kcid: "",
					kcname: "",
					jlid: this.store.state.jl.jlid,
					zxrs: 0,
					zdrs: 0,
					ybrs: 0,
					price: 0,
					ms: "",
					cs: 0,
					st: "",
					et: "",
					kclxid: "",
					lxname: "请选择课程类型",
					zt: "B",
					cover: "",
				},
				akechengitems: [],
				aroomyyjlitems: [],
				akechenglxs: [],
			};
		},
		onLoad: function() {
			// 取得类型树
			this.api("/kc/lx/tree").send({
			}).then(data => {
				this.akechenglxs = data.akechenglxs;
			});
			this.loadYyjlitem(this.util.dateUtils.nowDateStr(), null);
		},
		methods: {
			loadYyjlitem: function(sd, ed) {
				this.akechengitems = [];
				this.api("/yy/item").send({
					jlid: this.store.state.jl.jlid,
					kcitemid: "null",
					tflg: "P",
					sd,
					ed,
				}).then(data => {
					this.aroomyyjlitems = data.aroomyyjlitems;
					for (let index in this.aroomyyjlitems) {
						let yyjlitem = this.aroomyyjlitems[index];
						
						this.akechengitems.push({
							kcitemid: "",
							itemname: "",
							kcid: "",
							dt: yyjlitem.cd,
							st: yyjlitem.st,
							et: yyjlitem.et,
							rmsyid: yyjlitem.itemid,
							roomid: yyjlitem.roomid,
							storeid: yyjlitem.storeid,
							rname: yyjlitem.rname,
							sname: yyjlitem.sname,
						});
					}
				});
			},
			removeKcitem: function(index) {
				this.akechengitems.splice(index, 1);
			},
			coverChange: function(url) {
				this.akecheng.cover = url;
			},
			showPicker: function() {
				this.$refs.treePicker._show();
			},
			//监听选择（ids为数组）
			selectChange: function(ids, names) {
				this.akecheng.kclxid = ids[0];
				this.akecheng.lxname = names;
			},
			editorUploadSuccess: function(res) {
				
			},
			
			save: function() {
				if (this.dateOption.sd || this.dateOption.ed) {
					
				} else {
					this.message.error("期间必须选择");
					return;
				}
				this.akecheng.st = this.dateOption.sd;
				this.akecheng.et = this.dateOption.ed;
				
				// TODO 校验
				this.api("/kc/info").send({
					akecheng: this.akecheng,
					akechengitems: this.akechengitems
				}).then(data => {
					this.message.info("新增课程成功");
					uni.navigateBack();
				});
			},
			
			openDate: function() {
				this.$refs.goodDatePicker.open();
			},
			changeDate: function(e) { //单选择完日期回调，
				this.dateOption.cd = e.currentDate; //单选模式下返回当前选择的日期
				this.dateOption.sd = e.startDate; //区间选择模式下返回当前选择的开始日期
				this.dateOption.ed = e.endDate; //区间选择模式下返回当前选择的结束日期
				this.dateOption.dateNum = e.dateNum; //区间选择模式下返回的开始于结束日期的天数
				this.loadYyjlitem(this.dateOption.sd, this.dateOption.ed);
			},
		}
	}
</script>

<style scoped>
	.topright {
		top: 10rpx;
		right: 10rpx;
	}
</style>